<template>
    <div class="information">
        <div class="i-list">
            <div
                @mouseenter="onMouseOver(item, index)"
                @mouseleave="onMouseOut"
                v-for="(item, index) in dataList"
                :key="index"
                class="i-item"
            >
                <el-image
                    @click="goDetails(item)"
                    class="img"
                    :src="item.pic"
                    :alt="item.title"
                    fit="cover"
                    lazy
                ></el-image>
                <div class="info" @click="goDetails(item)">
                    <div class="title">
                        {{ item.title }}
                    </div>
                    <div class="bottom">
                        <div>文章来源：{{ item.resource }}</div>
                        时间：{{ item.push_date }}
                    </div>
                </div>

                <div
                    class="tips"
                    v-if="showTipsIndex == index"
                    @click="cancelLike"
                >
                    <img src="~/assets/images/userCenter/1_shanchu.png" alt="" />
                    <span class="c999 fz14 mt10">取消收藏</span>
                </div>
            </div>
            <el-empty v-if="total == 0" description="暂无数据"></el-empty>
            <div v-if="total > 0" class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="page"
                    :total="total"
                    :page-size="pageSize"
                    @current-change="changePage"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { getMyCollect, zx_cancelLike } from "@/assets/api/userCenterApi.js";

export default {
    name: "",
    components: {},
    props: {},
    data() {
        return {
            dataList: [],
            total: 0,
            page: 1,
            pageSize: 10,
            showTipsIndex: -1, //展示右侧取消收藏的按钮的下标
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.getMyCollect();
    },
    methods: {
        async getMyCollect() {
            var params = {
                page: 1,
                limit: this.limit,
                type: 8,
            };
            let res = await getMyCollect(params);
            if (res.code == 1) {
                this.dataList = res.data.data;
                this.total = res.data.total;
            }
        },
        //取消收藏
        async cancelLike() {
            let params = {
                cid: this.dataList[this.showTipsIndex].id,
            };
            let res = await zx_cancelLike(params);
            this.showTipsIndex = -1;
            if (res.code == 1) {
                this.$message({
                    message: "取消收藏成功",
                    type: "success",
                });
                this.dataList = [];
                this.page = 1;
                this.getMyCollect();
            }
        },

        //鼠标移入
        onMouseOver(item, index) {
            this.showTipsIndex = index;
        },
        //鼠标移出
        onMouseOut() {
            this.showTipsIndex = -1;
        },

        // 前往详情
        goDetails(item) {
            // this.$router.push({ path: 'information/Details', query: { id: item.id, name: this.tabsList[this.tabsIndex].name } })

            let routeData = this.$router.resolve({
                path: "/information/" + item.id + ".html",
            });
            window.open(routeData.href, "_blank");
        },

        // 切换分页
        changePage(page) {
            this.page = page;
            this.getMyCollect();
        },
    },
};
</script>
<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.imformation {
    padding-top: 28px;
}

.i-list {
    background: #ffffff;
    margin: 20px auto;
}

.i-item {
    position: relative;
    color: #333333;
    display: flex;
    align-items: center;
    padding: 32px 38px 25px 38px;
    cursor: pointer;

    &:hover {
        background: #f7f9fb;
        color: #1c87f3;
    }

    .tips {
        cursor: pointer;
        position: absolute;
        top: 47px;
        right: 37px;

        img {
            width: 26px;
            height: 26px;
            vertical-align: middle;
        }
    }

    .img {
        width: 220px;
        height: 137px;
        min-width: 220px;
        min-height: 137px;
        border-radius: 6px 6px 6px 6px;
        margin-right: 42px;
    }

    .info {
        .title {
            font-size: 16px;
            line-height: 22px;
            height: 98px;
            width: 510px;
        }

        .bottom {
            color: #999999;
            font-size: 12px;

            div {
                display: inline-block;
                min-width: 160px;
                margin-right: 15px;
            }
        }
    }
}

.pagination {
    text-align: center;
    padding: 20px 0;
}
</style>
